import React, {Component} from "react"
import  {Link, browserHistory} from 'react-router'
import fetchData from '../../util/fetch'
import {Popover} from 'antd'
var ReactDOM = require("react-dom");
class ExpertTeam extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: "服务",
            homelist: [],
            banner: null,
            ourTeam: null,//专家团队 2-11
            expertTeam: null,// 房务团队2-12
            infantAndMomNurseTeam: null,//专家医生2-13
            nurseTeam: null,//护理团队 2-14
            servicesTeam: null,//后勤团队2-15
            beautifulItem:null,//美颜管理2-23
            eatingItem:null,//营养餐饮2-22
            healthItem:null,//健康顾问2-20
            homeItem:null,//专属管家2-21
            dyf: null, //介绍团队
            proFornurse:null,//护理团队介绍 2-14-1
        }
    }


    getData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            switch (opts.str) {
                case '2-11':
                    this.setState({
                        ourTeam: data
                    });
                    break;
                case '2-12':
                    this.setState({
                        expertTeam: data
                    });
                    break;
                case '2-13':
                    this.setState({
                        infantAndMomNurseTeam: data
                    });
                    break;
                case '2-14':
                    this.setState({
                        nurseTeam: data
                    });
                    break;
                case '2-15':
                    this.setState({
                        servicesTeam: data
                    });
                    break;
                case '2-23':
                    this.setState({
                        beautifulItem: data
                    });
                    break;
                case '2-22':
                    this.setState({
                        eatingItem: data
                    });
                    break;
                case '2-20':
                    this.setState({
                        healthItem: data
                    });
                    break;
                case '2-21':
                    this.setState({
                        homeItem: data
                    });
                    break;
                case '2-13-1':
                    this.setState({
                        dyf: data
                    });
                    break;
                case '2-14-1':
                    this.setState({
                        proFornurse: data
                    });
                    break;
            }
        }.bind(this))
    }


    getBannerData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data);
            this.setState({
                banner: data
            });
        }.bind(this));
    }

    componentWillMount() {
        //banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
        this.getBannerData('/crm/api/v1/web/banner/findOneByType', {"dataId": 23});
        //2-11	专家团队 Our Team
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-11"});
        //2-12	房屋团队
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-12"});
        // 2-13	母婴护理师团队
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-13"});
        // 2-14	护理团队
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-14"});
        // 2-15	后勤团队
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-15"});
        // 2-23	美颜管理
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-23"});
        // 2-22 营养餐饮
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-22"});
        // 2-20 健康顾问
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-20"});
        // 2-21 专属管家
        this.getData('/crm/api/v1/web/news/findOneByType', {"str": "2-21"});
        // 2-13-1 介绍团队
        this.getData('/crm/api/v1/web/news/findListByType', {"str": "2-13-1"});
        // 2-14-1 护理团队介绍团队
        this.getData('/crm/api/v1/web/news/findListByType', {"str": "2-14-1"});
    }

    componentDidMount() {
        if (this.props.params.anchor) {
            const anchor = '#' + this.props.params.anchor;
            setTimeout(function () {
                $("body").animate({ scrollTop: $(anchor).offset().top }, 500)
            }, 350)
        }
    }

    render() {

        // if (this.state.expertTeam && $(".expertTeam-div p").nextAll().length === 0) {
        //     // console.log('专家团队>>', this.state.expertTeam.content);
        //     $(".expertTeam-div-content").html(this.state.expertTeam.content);
        // }
        //
        // if (this.state.nurseTeam && $(".expertTeam-div p").nextAll().length === 0) {
        //     // console.log('护理团队>>', this.state.nurseTeam.content);
        //     $(".expert-academic-content").html(this.state.nurseTeam.content);
        //
        // }
        // if (this.state.infantAndMomNurseTeam && $(".infantAndMomNurseTeam-div p").nextAll().length === 0) {
        //     $(".infantAndMomNurseTeam-div").append(this.state.infantAndMomNurseTeam.content);
        // }
        // if (this.state.nurseTeam && $(".nurseTeam-div p").nextAll().length === 0) {
        //     $(".nurseTeam-div").append(this.state.nurseTeam.content);
        //     // console.log(this.state.nurseTeam.content);
        // }
        // if (this.state.servicesTeam && $(".servicesTeam-div p").nextAll().length === 0) {
        //     $(".servicesTeam-div").append(this.state.servicesTeam.content);
        // }

        const {dyf,proFornurse} = this.state;

        let content = null;

        return (
            <div className="expertTeam">
                <div className="service-banner"><img src={this.state.banner ? this.state.banner.imgUrl : null}/></div>
                <div className="content OurTeam" id="ourTeam">
                    <h2>{this.state.ourTeam ? this.state.ourTeam.title : null}<span></span></h2>
                    <div className="expert-image">
                        <img src={this.state.ourTeam ? this.state.ourTeam.img1Url : null}/>
                    </div>
                </div>

                <div className="content team-type">
                    <div className="contentBoxTeam contentBoxBorder">
                        <div className="content-box expertTeamBox">
                            <div className="contentBox-left expertTeam-left">
                                <img src={this.state.infantAndMomNurseTeam ? this.state.infantAndMomNurseTeam.img3Url : null}/>
                            </div>
                            <div className="contentBox-right expertTeam-right  expertTeam-div">
                                <h3>{this.state.infantAndMomNurseTeam ? this.state.infantAndMomNurseTeam.title : null}</h3>
                                <div className="expert-academic"
                                     style={{fontSize: '14px'}}>{this.state.infantAndMomNurseTeam ? this.state.infantAndMomNurseTeam.content : null}</div>
                                <div className="expertTeam-div-content"></div>
                                {/*<p className="expert-academic">{this.state.expertTeam?this.state.expertTeam.summary:null}</p>*/}
                            </div>

                        </div>

                        <div className="contentBoxDyf">
                            <ul>
                                {dyf ? dyf.map(function (item, index) {
                                            let position;
                                            const mode = index % 4;
                                            if (mode == 0 || mode == 1 ) {
                                                position = 'topLeft'
                                            } else {
                                                position = 'topRight'
                                            }

                                            return (
                                                <Popover arrowPointAtCenter={false} placement={position} content={
                                                    <div style={{width:600,maxHeight:250}}>
                                                        <h4 style={styles.title}>{item.title}</h4>
                                                        <p  style={styles.content}><span style={{color:'rgb(182, 114, 51)'}}>个人简介&nbsp;:</span>&nbsp;<span dangerouslySetInnerHTML={{__html: item.content}}></span></p>
                                                    </div>
                                                }><li>
                                                        <div style={{width: 170, height: 210}}>
                                                            <img src={item.img1Url}/>
                                                        </div>
                                                        <div style={{marginTop: 10}}>
                                                            <div style={{
                                                                textAlign: 'center',
                                                                color: '#b67233',
                                                                fontSize: '14px'
                                                            }}>
                                                                {item.title}
                                                            </div>
                                                            <div style={{width: 170, marginTop: 5}}>
                                                                {item.summary}
                                                            </div>
                                                        </div>
                                                    </li>
                                                </Popover>
                                            )
                                        })
                                        :
                                        null
                                }
                            </ul>
                        </div>
                    </div>
                    {/*护理团队*/}
                    <div className="contentBoxTeam contentBoxBorder">
                        <div className="content-box expertTeamBox">
                            <div className="contentBox-left expertTeam-left">
                                <img src={this.state.nurseTeam ? this.state.nurseTeam.img3Url : null}/>
                            </div>
                            <div className="contentBox-right expertTeam-right  expertTeam-div">
                                <h3>{this.state.nurseTeam ? this.state.nurseTeam.title : null}</h3>
                                <div className="expert-academic"
                                     style={{fontSize: '14px'}}>{this.state.nurseTeam ? this.state.nurseTeam.content : null}</div>
                                <div className="expertTeam-div-content expert-academic-content"></div>
                                {/*<p className="expert-academic">{this.state.expertTeam?this.state.expertTeam.summary:null}</p>*/}
                            </div>

                        </div>

                        <div className="contentBoxDyf">
                            <ul>
                                {
                                    proFornurse
                                        ?
                                        proFornurse.map(function (item, index) {
                                            let position;
                                            const mode = index % 4;
                                            if (mode == 0 || mode == 1 ) {
                                                position = 'topLeft'
                                            } else {
                                                position = 'topRight'
                                            }
                                            return (
                                                <Popover arrowPointAtCenter={false} placement={position} content={
                                                    <div style={{width:600,maxHeight:250}}>
                                                        <h4 style={styles.title}>{item.title}</h4>
                                                        <p  style={styles.content}><span style={{color:'rgb(182, 114, 51)'}}>个人简介&nbsp;:</span>&nbsp;<span dangerouslySetInnerHTML={{__html: item.content}}></span></p>
                                                    </div>
                                                }>
                                                    <li>
                                                        <div style={{width: 170, height: 210}}>
                                                            <img src={item.img1Url}/>
                                                        </div>
                                                        <div style={{marginTop: 10}}>
                                                            <div style={{
                                                                textAlign: 'center',
                                                                color: '#b67233',
                                                                fontSize: '14px'
                                                            }}>
                                                                {item.title}
                                                            </div>
                                                            <div style={{width: 170, marginTop: 5}}>
                                                                {item.summary}
                                                            </div>
                                                        </div>
                                                    </li>
                                                </Popover>
                                            )
                                        })
                                        :
                                        null
                                }
                            </ul>
                        </div>
                    </div>

                    {/*美颜管理*/}
                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left infantAndMomNurseTeam-div">
                            <h3>{this.state.beautifulItem ? this.state.beautifulItem.title : null}</h3>
                            <p className="expert-academic">{this.state.beautifulItem ? this.state.beautifulItem.content : null}</p>
                        </div>
                        <div className="contentBox-right expertTeam-right">
                            <img
                                src={this.state.beautifulItem ? this.state.beautifulItem.img3Url : null}/>
                        </div>
                    </div>

                    {/*营养餐饮*/}
                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left">
                            <img src={this.state.eatingItem ? this.state.eatingItem.img3Url : null}/>
                        </div>
                        <div className="contentBox-right expertTeam-right nurseTeam-div">
                            <h3>{this.state.eatingItem ? this.state.eatingItem.title : null}</h3>
                            <p className="expert-academic">{this.state.eatingItem ? this.state.eatingItem.content : null}</p>
                        </div>
                    </div>
                    {/*健康顾问*/}
                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left infantAndMomNurseTeam-div">
                            <h3>{this.state.healthItem ? this.state.healthItem.title : null}</h3>
                            <p className="expert-academic">{this.state.healthItem ? this.state.healthItem.content : null}</p>
                        </div>
                        <div className="contentBox-right expertTeam-right">
                            <img
                                src={this.state.healthItem ? this.state.healthItem.img3Url : null}/>
                        </div>
                    </div>
                    {/*专属管家*/}
                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left">
                            <img src={this.state.homeItem ? this.state.homeItem.img3Url : null}/>
                        </div>
                        <div className="contentBox-right expertTeam-right nurseTeam-div">
                            <h3>{this.state.homeItem ? this.state.homeItem.title : null}</h3>
                            <p className="expert-academic">{this.state.homeItem ? this.state.homeItem.content : null}</p>
                        </div>
                    </div>
                    {/*房务团队*/}
                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left infantAndMomNurseTeam-div">
                            <h3>{this.state.expertTeam ? this.state.expertTeam.title : null}</h3>
                            <p className="expert-academic">{this.state.expertTeam ? this.state.expertTeam.content : null}</p>
                        </div>
                        <div className="contentBox-right expertTeam-right">
                            <img
                                src={this.state.expertTeam ? this.state.expertTeam.img3Url : null}/>
                        </div>
                    </div>


                    <div className="content-box expertTeamBox contentBoxBorder">
                        <div className="contentBox-left expertTeam-left">
                            <img src={this.state.servicesTeam ? this.state.servicesTeam.img3Url : null}/>
                        </div>
                        <div className="contentBox-right expertTeam-right nurseTeam-div">
                            <h3>{this.state.servicesTeam ? this.state.servicesTeam.title : null}</h3>
                            <p className="expert-academic">{this.state.servicesTeam ? this.state.servicesTeam.content : null}</p>
                        </div>
                    </div>


                </div>
            </div>
        )
    }
}
const styles = {
    title: {
        fontSize: '24px',
        margin: '20px 0'
    },
    content: {
        fontSize: '16px',
        lineHeight: '25px',
        paddingBottom: '30px'

    }
}
export default ExpertTeam;
